import React, { Component } from 'react';

import { Form } from '@ant-design/compatible';
import { FormComponentProps } from '@ant-design/compatible/es/form';

import {
  Row,
  Col,
  Input,
  Modal,
  Button,
  Table,
  Tooltip,
} from 'antd';


import '@ant-design/compatible/assets/index.css';

interface SaveDepartmentProps extends FormComponentProps {
  id: number;
  saveVisible: boolean;
  lookupList: any;
  handleCancel: (value: boolean) => void;
  fetchAction: (typeName: string, payload: any) => void;
}

interface SaveDepartmentState {
  name: string,
  pageIndex: number,
  pageSize: number,
  formIds: number[];
}

class SaveDepartmentElem extends Component<SaveDepartmentProps, SaveDepartmentState> {
  columns = [
    {
      title: '部门ID',
      dataIndex: 'id',
    },
    {
      title: '部门名称',
      dataIndex: 'name',
      render: (text: string) => (
        <Tooltip title={text}>
          <div className="wordOmit">{text || '--'}</div>
        </Tooltip>
      ),
    },
    {
      title: '所属部门',
      dataIndex: 'parentName',
      render: (text: string) => (
        <Tooltip title={text}>
          <div className="wordOmit">{text || '--'}</div>
        </Tooltip>
      ),
    },
    {
      title: '创建时间',
      dataIndex: 'create_time',
      render: (text: string) => (
        <Tooltip title={text}>
          <div className="wordOmit">{text}</div>
        </Tooltip>
      ),
    },
    {
      title: '创建人',
      dataIndex: 'create_user',
      render: (text: string) => text || '--',
    },
  ];

  state: SaveDepartmentState = {
    name: '',
    pageIndex: 1,
    pageSize: 5,
    formIds: [],
  }

  handleCancel = () => {
    const { handleCancel } = this.props;
    handleCancel(false);
  }

  handleSearch = (e: React.FormEvent) => {
    e.preventDefault();

    const { form: { validateFieldsAndScroll } } = this.props;
    validateFieldsAndScroll((errors, { name }) => {
      if (errors) return;

      const params = {
        name,
        pageIndex: 1,
        pageSize: 5,
      };
      this.setState({ ...params }, () => {
        const { fetchAction } = this.props;
        fetchAction('saveDepartmentList', params);
      });
    });
  }

  handleSave = () => {
    const { id: gardenId } = this.props;
    const { formIds } = this.state;
    const orgIdList = formIds.join(',');
    const params = { orgIdList, gardenId };

    const { fetchAction } = this.props;
    fetchAction('saveDepartment', params);
    this.handleCancel();
  }

  handleInit = () => {
    const { form: { resetFields } } = this.props;
    resetFields(['name']);

    this.setState({
      name: '',
      pageIndex: 1,
      pageSize: 5,
      formIds: [],
    });
  }

  onSelectChange = (pageIndex: number, pageSize: number) => {
    const { name } = this.state;
    const { fetchAction } = this.props;

    this.setState({
      pageIndex,
      pageSize,
    }, () => fetchAction('saveDepartmentList', { name, pageIndex, pageSize }));
  }

  render() {
    const { pageIndex, pageSize } = this.state;
    const {
      form: { getFieldDecorator },
      saveVisible,
      lookupList,
    } = this.props;

    const rowSelection = {
      onChange: (selectedRowKeys: number[] | any[], selectedRows: object) => {
        this.setState({ formIds: selectedRowKeys });
      },
    };
    const dataSource = lookupList ? lookupList.list : [];
    const pagination: object = lookupList
      ? {
        total: lookupList.count,
        current: pageIndex,
        pageSize,
        showQuickJumper: true,
        showSizeChanger: true,
        pageSizeOptions: ['5', '10'],
        onChange: this.onSelectChange,
        onShowSizeChange: this.onSelectChange,
      }
      : {};

    return (
      <Modal
        title="添加数据部门"
        centered
        width={800}
        visible={saveVisible}
        destroyOnClose
        onOk={this.handleSave}
        onCancel={this.handleCancel}
        okText="添加"
        afterClose={this.handleInit}
      >
        <Form className="tableListForm" onSubmit={this.handleSearch}>
          <Row gutter={12}>
            <Col md={16} sm={24}>
              <Form.Item label="部门名称" colon={false}>
                {getFieldDecorator('name')(
                  <Input allowClear placeholder="请输入" />,
                )}
              </Form.Item>
            </Col>
            <Col md={8} sm={24}>
              <div className="flexFeView">
                <Button
                  type="primary"
                  htmlType="submit"
                  className="smallButton"
                >查询
                </Button>
              </div>
            </Col>
          </Row>
        </Form>
        <Table
          rowKey="id"
          tableLayout="fixed"
          className="tableList statementTable"
          rowSelection={rowSelection}
          dataSource={dataSource}
          columns={this.columns}
          pagination={pagination}
          style={{ marginTop: 24 }}
        />
      </Modal>
    );
  }
}

export default Form.create<SaveDepartmentProps>()(SaveDepartmentElem);
